<template>
	<view class="success">
		<view class="wrap">
			
			<view class="icon">
				<text class="iconfont icon-success_circle"></text>
			</view>
			<view class="title">下单成功</view>
			<view class="content">订单编号：{{order.order_number}}</view>
			<view class="common">
				
				<button size="mini" class="chakan" @click="goHome">返回首页</button>
				
				<!-- #ifdef H5 -->
				<button size="mini" type="warn" class="pay" @click="payH5(order.id)">立即支付</button>
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<button size="mini" type="warn" class="pay" @click="pay(order.id)">立即支付</button>
				<!-- #endif -->
				
				
			</view>
			
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order : {}
			};
		},
		onLoad(options) {
			let id = options.id
			this.loadData(id)
		},
		methods: {
			
			goHome(){
				uni.navigateTo({
					url:'../home/home'
				})
			},
			
			loadData(id) {
				
				this.$http.post('/shop.order/read', { order_id: id }).then(res => {				
				
				  this.order = res.data.data;
				
				});
				
			},
			
			
			// #ifdef MP-WEIXIN
			// 微信小程序支付			
			pay(order_id){
				
				
				this.$http.post('/shop.order/wx_app_pay_sign', { order_id: order_id }).then(res => {
				
				   console.log(JSON.stringify(res));
				   				
				   if (res.data.data) {
				   	//this.jsApiCall(res.data);				
					
					
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: "MD5",
							paySign: res.data.data.paySign,							
							success: function(Pay_res) {
								
								uni.showModal({
									    content: '支付成功',
										showCancel: false,
									    success: function (res) {
									        if (res.confirm) {
									            //console.log('用户点击确定');
												// 点击 确定 进入订单
												uni.navigateTo({
													url: './order?state=0'
												})
									        } 
									    }
								})		
								
								 
						
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					
					
				   } else {
				   	alert('支付出现一些问题，请联系管理员');
				   }
				
				 });				
			},
			
			// #endif
			
			
			// #ifdef H5
			// 微信H5支付
			
			// 调用微信WeixinJSBridge支付
			jsApiCall(signature) {
				/* eslint-disable no-undef */
				WeixinJSBridge.invoke('getBrandWCPayRequest', signature, function(res) {
					// WeixinJSBridge.log(res.err_msg);			
					// alert(JSON.stringify(res));
			
					if (res.err_msg === 'get_brand_wcpay_request:ok') {
			
						uni.showModal({
							    content: '支付成功',
								showCancel: false,
							    success: function (res) {
							        if (res.confirm) {
							            //console.log('用户点击确定');
										// 点击 确定 进入订单
										uni.navigateTo({
											url: './order?state=0'
										})
							        } 
							    }
						})				
			
					} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
						alert('用户取消支付');
					} else {
						alert('支付失败');
					}
				});
			},
			
			payH5(order_id){
				
				this.$http.post('/shop.order/wx_pay_sign', { order_id: order_id }).then(res => {
				
				   console.log(JSON.stringify(res));				   				
				   if (res.data.data) {
					   
						this.jsApiCall(res.data.data);									
					
				   } else {
						alert('支付出现一些问题，请联系管理员');
				   }
				
				 });
				
			},		
			
			// #endif
			
		},
	}
</script>

<style lang="scss">
	
	.success{
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: center;
	}

.wrap{
	
	text-align: center;
	margin-top: 200rpx;
	
	.title{
		font-weight: bold;
		font-size: 40rpx;
	}
	
	.content{
		line-height: 3;
	}
	
	.common{
		.chakan{
			margin-right: 20rpx;
		}
		.pay{
			background: #1aad19;
			color: white;
		}
	}
	
	.icon{
		text-align: center;
		.iconfont{
			font-size: 200rpx;
			color: #008577;
		}
	}
	
	
	
	
	
}
</style>
